<template>
	<view class="navbar">
		<su-status-bar v-if="!sheep.$platform.inApp" />
		<view class="navbar-placeholder"></view>
		<view class="navbar-center ss-flex ss-col-bottom " :style="{
      height: sheep.$platform.device.statusBarHeight + 44 + 'px',
    }">
			<!-- <su-status-bar  /> -->
			<view class="center ss-flex-1 ss-flex">
				<view class="ss-flex-1" v-if="messageTitleShow">
					<slot>
						<view class="navbar-title ss-flex ss-row-center">{{
            props.title.substring(0,props.maxLength) }}
							<span v-if="props.maxLength<=6">..</span>
						</view>
					</slot>
				</view>
				<view class="navbar-rightBtn ss-flex ss-flex-1 ss-row-between">
					<view class=" ss-flex ss-flex-1 ss-row-between align-center">
						<view>
							<slot name="left">
								<view @click="onClickLeft" style="padding:0 20rpx;"><uni-icons type="back" size="20"
										color="#333"></uni-icons></view>
							</slot>
						</view>
						<view v-if="!messageTitleShow">
							<slot name="center">
							</slot>
						</view>
						<view>
							<slot name="right">
							</slot>
						</view>
					</view>
					<!-- #ifdef MP -->
					<view v-if="!sheep.$platform.inPc" :style="[capsuleStyle]"></view>
					<!-- #endif -->
					<view v-if="sheep.$platform.inApp" :style="[capsuleStyle]"></view>
				</view>
				<!-- #ifdef MP -->
				<view v-if="!sheep.$platform.inPc" :style="[capsuleStyle]"></view>
				<!-- #endif -->
				<view v-if="sheep.$platform.inApp" :style="[capsuleStyle]"></view>
			</view>

		</view>
	</view>
</template>

<script setup>
	import {
		computed,
		reactive
	} from 'vue';
	import sheep from '@/sheep';
	const props = defineProps({
		title: {
			type: String,
			default: '',
		},
		maxLength: {
			type: Number,
			default: 99,
		},
		messageTitleShow: {
			type: Boolean,
			default: true
		}
	});

	const hasHistory = sheep.$router.hasHistory();

	function onClickLeft() {
		sheep.$router.back();
	}

	const capsuleStyle = computed(() => {
		return {
			width: sheep.$platform.capsule.width + 'px',
			minWidth: sheep.$platform.capsule.width + 'px',
			height: sheep.$platform.capsule.height + 'px',
			margin: '0 ' + (sheep.$platform.device.windowWidth - sheep.$platform.capsule.right) + 'px 0 0',
		};
	});
	const template = computed(() => sheep.$store('app').template.user);
</script>

<style lang="scss" scoped>
	view {
		box-sizing: border-box;
	}

	.navbar {
		.navbar-placeholder {
			height: 44px;
		}

		.navbar-center {
			width: 100vw;
			position: fixed;
			top: 0;
			z-index: 100;
			background-repeat: no-repeat;
			background-position-x: center;
			background-position-y: top;
			background-size: 100% !important;
			background-color: #fff;

			.center {
				position: relative;
				height: 44px;
			}

			.navbar-title {
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
				font-size: 36rpx;
				font-weight: 700;
				color: #333;
			}

			.navbar-rightBtn {
				color: #fff;
				font-size: 32rpx;
				height: 100%;
				width: 100%;
				position: absolute;
				top: 0;
				left: 0;

				&>view {
					height: 44px;
				}
			}
		}
	}
</style>